<template>
    <div class="all">
        <div class="bread">首页>>车辆管理>>车辆列表</div>
        
        <div class="nav">
          <el-button style="margin:3px 50px 0px 10px "  type="primary" size="small"  plain @click="addCarVisible = true">添加车辆</el-button> 

          <el-form  :inline="true" :model="formInline" class="demo-form-inline">
                  <!-- <el-form-item label="车牌号">
                    <el-input v-model="formInline.user" placeholder="车牌号" clearable />
                  </el-form-item> -->
                  <!-- <el-form-item label="日期类型">
                    <el-select
                      v-model="formInline.DataType"
                      placeholder="请选择时间类型"
                      clearable
                    >
                      <el-option label="出车日期" value="chucheriqi" />
                      <el-option label="返回日期" value="fanhuiriqi" />
                    </el-select>
                  </el-form-item> -->
                  <el-form-item label="起止日期">
                    <!-- <el-date-picker
                      v-model="formInline.date"
                      type="date"
                      placeholder="请选择日期"
                      clearable
                    /> -->
                    <el-date-picker
                      v-model="formInline.date"
                      type="daterange"
                      range-separator="到"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="YYYY-MM-DD"
                      :size="size"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="chaxun">查询</el-button>
                  </el-form-item>
                </el-form>
        </div>
        <!-- 车辆信息表格 -->
        <div class="content">
            <el-table :data="tableData" border size="small" 
                      :row-style="{height: '35px'}" 
                      :cell-style="{padding: '0'}" 
                      style="width: 100% ;height:calc(100% - 150px);" 
                      v-loading="tableloading" 
                      >
              <el-table-column  type="expand" label="选项" width="50">
                <template #default="{row}">
                  <div m="4">
                    <el-button link type="primary" size="small" @click.prevent="tanList(row,'出车记录')"
                    >出车记录</el-button>{{row.record.length}} <span class="tianjia" @click="tanchuChuche(row)" >添加</span>

                    <el-button link type="primary" size="small" @click.prevent="tanList(row,'加油记录')"
                    >加油记录</el-button>{{row.oil.length}} <span class="tianjia" @click="tanchuJiayou(row)">添加</span>

                    <el-button link type="primary" size="small" @click.prevent="tanList(row,'维修记录')"
                    >维修记录</el-button>{{row.repair.length}} <span class="tianjia" @click="tanchuWeixiu(row)">添加</span>

                    <el-button link type="primary" size="small" @click.prevent="tanList(row,'违章记录')"
                    >违章记录</el-button> {{row.law.length}} <span class="tianjia" @click="tanchuWeizhang(row)">添加</span>

                    <el-button link type="primary" size="small" @click.prevent="tanList(row,'其他记录')"
                    >其他记录</el-button> {{row.other.length}} <span class="tianjia" @click="tanchuQita(row)">添加</span>

                    <el-button link type="primary" size="small" @click.prevent="tanList(row,'年检记录')"
                    >年检记录</el-button> {{row.carCheck.length}} <span class="tianjia" @click="tanchuNianjian(row)">添加</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed label="序号" type="index" width="41" />
              <!-- <el-table-column fixed prop="xuhao" label="序号" width="50"/> -->
              <el-table-column  prop="type" label="车型分类" width="70" />
              <el-table-column prop="chepaihao" label="车牌号码" width="80" />
              <el-table-column prop="name" label="车辆名称" width="130" />
              <el-table-column prop="date" label="上牌日期" width="100" />
              <el-table-column prop="xinghao" label="型号" width="200" />
              <el-table-column prop="chejia" label="车架号/sim" width="100" />
              <el-table-column prop="fadongji" label="发动机号" width="100" />
              <el-table-column prop="licheng" label="行驶里程" width="70" />
              <el-table-column prop="position" label="所处位置" width="100" />
              <el-table-column prop="nianjian" label="首次年检时间" width="120" />

              
              <el-table-column prop="xingshizheng" label="行驶证" width="120">
                     <template #default="{row}">
                      <span  v-for='(item,index) in row.images' :key='index'>
                      <el-image 
                      v-if='item.type === "xingshizheng"'
                       :src="item.fileName"  style="width:30px;height:30px"
                       :zoom-rate="1.2"
                       :max-scale="7"
                       :min-scale="0.2"
                       :preview-src-list="[item.fileName]"
                       :preview-teleported="true"
                       :initial-index="999999"
                       >
                       </el-image>
                      </span>
                     </template>
              </el-table-column>

              <el-table-column prop="fapiao" label="发票" width="120">
                     <template #default="{row}">
                      <span  v-for='(item,index) in row.images' :key='index' >
                       <el-image 
                       v-if='item.type === "fapiao"'
                       :src="item.fileName"  style="width:30px;height:30px"
                       :zoom-rate="1.2"
                       :max-scale="7"
                       :min-scale="0.2"
                       :preview-src-list="[item.fileName]"
                       :preview-teleported="true"
                       :initial-index="999999"
                       >
                       </el-image>
                      </span>
                     </template>
              </el-table-column>

              <el-table-column prop="hegezheng" label="合格证" width="120">
                     <template #default="{row}">
                      <span  v-for='(item,index) in row.images' :key='index'>
                        <el-image 
                        v-if='item.type === "hegezheng"'
                       :src="item.fileName"  style="width:30px;height:30px"
                       :zoom-rate="1.2"
                       :max-scale="7"
                       :min-scale="0.2"
                       :preview-src-list="[item.fileName]"
                       :preview-teleported="true"
                       :initial-index="999999"
                       >
                       </el-image>
                      </span>
                     </template>
              </el-table-column>



              <el-table-column prop="zhuangtai" label="状态" width="60" />
              <el-table-column prop="waidiao" label="外调" width="60" />
              <el-table-column fixed="right" label="操作" width="120">
                <template #default="{row}" >
                  <el-button link type="primary" size="small" @click.prevent="bianjiClick(row)"
                    >编辑</el-button>
                  <el-button link type="primary" size="small" @click.prevent="deleteInfo(row)" >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="page">
              <el-pagination
              v-if="total"
                :page-size="20"
                small
                :background="true"
                layout="total, prev, pager, next"
                :total="total"
                @current-change="sizeChange"
            />
            </div>
        </div>
    </div>

    <!-- 添加车辆对话框 -->
     <el-dialog
         v-model="addCarVisible"
         title="添加车辆"
         width="1000"
         :before-close="carlistClose"
         style="text-align:center;padding-top: 10px;"
       >

       <!-- 添加记录的表单内容 -->
        <el-form    
        v-loading="loading"   
        :model="form" 
        label-width="auto" 
        style="max-width: 800px;padding: 0px 40px 40px 40px;" 
        ref="formRef"
        :rules="addCarrules"
        >
          <el-row>

          <el-col :span="8">
            <el-form-item inline-message='true' label="车辆类型">
              <el-select v-model="form.type" placeholder="选择车辆类型">
                <el-option label="蓝牌" value="蓝牌" />
                <el-option label="黄牌" value="黄牌" />
              </el-select>
            </el-form-item>
          </el-col>
        
        <el-col :span="8">
          <el-form-item label="车牌号码">
            <el-input v-model="form.chepaihao" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="车辆名称">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="上牌时间">
            <el-col :span="100">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item>
        </el-col>

        <el-col :span="8">
         <el-form-item label="型号">
            <el-input v-model="form.xinghao" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="车架号" prop="chejia">
            <el-input  v-model="form.chejia" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="发动机号">
            <el-input v-model="form.fadongji" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
         <el-form-item label="行驶里程">
            <el-input v-model="form.licheng" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
         <el-form-item label="所处位置">
            <el-input v-model="form.position" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
         <el-form-item label="首次年检日期">
            <el-col :span="100">
              <el-date-picker
                v-model="form.nianjian"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="状态">
            <el-select v-model="form.zhuangtai" placeholder="选择状态">
              <el-option label="使用" value="使用" />
              <el-option label="闲置" value="闲置" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
        <el-form-item label="外调">
            <el-select v-model="form.waidiao" placeholder="选择记录类型">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="行驶证">
            <el-upload
            ref="xingshizhengRef"
             v-model:file-list="xingshizhengList"
             class="upload-demo"
             action="https://ai-cxd.cn//admin/uploadFile"
             multiple
             :on-preview="xingshizhengPreview"
             :on-remove="xingshizhengRemove"
             :limit="4"
             list-type="picture-card"
             :on-success="xingshizhengupDate"
           >
           <el-icon><Plus /></el-icon>             
           </el-upload>
           <!-- 行驶证预览 -->
           <el-dialog   v-model="addXingshizhengYulan">
               <img  style="width:100%;"  :src="XingshizhengYulanUrl" alt="Preview Image" />
           </el-dialog>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="发票">
            <el-upload
            ref="fapiaoRef"
             v-model:file-list="fapiaoList"
             class="upload-demo"
             action="https://ai-cxd.cn//admin/uploadFile"
             multiple
             :on-preview="fapiaoPreview"
             :on-remove="fapiaoRemove"
             :limit="4"
             list-type="picture-card"
             :on-success="fapiaoupDate"
           >
           <el-icon><Plus /></el-icon>             
           </el-upload>
           <!-- fapiao预览 -->
           <el-dialog   v-model="addfapiaoYulan">
               <img  style="width:100%;"  :src="fapiaoYulanUrl" alt="Preview Image" />
           </el-dialog>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="合格证">
            <el-upload
            ref="hegezhengRef"
             v-model:file-list="hegezhengList"
             class="upload-demo"
             action="https://ai-cxd.cn//admin/uploadFile"
             multiple
             :on-preview="hegezhengPreview"
             :on-remove="hegezhengRemove"
             :limit="4"
             list-type="picture-card"
             :on-success="hegezhengupDate"
           >
           <el-icon><Plus /></el-icon>             
           </el-upload>
           <!-- fapiao预览 -->
           <el-dialog   v-model="addhegezhengYulan">
               <img  style="width:100%;"  :src="hegezhengYulanUrl" alt="Preview Image" />
           </el-dialog>
          </el-form-item>
        </el-col>

        </el-row>

        </el-form>

         <template #footer>
           <div class="dialog-footer">
             <el-button @click="quxiaoAddcar(formRef)">取消</el-button>
             <el-button type="primary" @click="qurenAdd(formRef)">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>
       

    <!-- 编辑车辆对话框 -->
     <el-dialog
         v-model="bianjiVisible"
         title="编辑车辆信息"
         width="1000"
         :before-close="editClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 编辑记录的表单内容 -->
        <el-form v-loading="editCarloading" :model="form1" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">
          <el-row>   
          <el-col :span="8">
          <el-form-item inline-message='true' label="车辆类型">
            <el-select v-model="form1.type" placeholder="选择车辆类型">
              <el-option label="蓝牌" value="蓝牌" />
              <el-option label="黄牌" value="黄牌" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="车牌号码">
            <el-input v-model="form1.chepaihao" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="车辆名称">
            <el-input v-model="form1.name" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="上牌时间">
            <el-col :span="100">
              <el-date-picker
                v-model="form1.date"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item>
        </el-col>
    
        <el-col :span="8">
         <el-form-item label="型号">
            <el-input v-model="form1.xinghao" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="车架号">
            <el-input v-model="form1.chejia" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="发动机号">
            <el-input v-model="form1.fadongji" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
         <el-form-item label="行驶里程">
            <el-input v-model="form1.licheng" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
         <el-form-item label="所处位置">
            <el-input v-model="form1.position" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
         <el-form-item label="首次年检日期">
            <el-col :span="100">
              <el-date-picker
                v-model="form1.nianjian"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="状态" white-space='nowrap'>
            <el-select v-model="form1.zhuangtai" placeholder="选择状态">
              <el-option label="使用" value="使用" />
              <el-option label="闲置" value="闲置" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
        <el-form-item label="外调" white-space='nowrap'>
            <el-select v-model="form1.waidiao" placeholder="选择记录类型">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="行驶证">
            <div v-for='(item,index) in form1.images' :key=index >
              <div v-if='item.type === "xingshizheng"'>
                <el-image 
                 style="width: 100px; height: 100px" 
                 :src="item.fileName" 
              ></el-image><span @click='deleteImages(item.name)' class='deImage'>删除</span>
            </div>
            </div>
            <el-upload
            ref="xingshizhengRef1"
             v-model:file-list="xingshizhengList"
             class="upload-demo"
             action="https://ai-cxd.cn//admin/uploadFile"
             multiple
             :on-preview="xingshizhengPreview"
             :on-remove="xingshizhengRemove"
             :limit="3"
             list-type="picture-card"
             :show-file-list='false'
             :on-success="xingshizhengupDate1"
           >
           <el-icon><Plus /></el-icon>             
           </el-upload>
           <!-- 行驶证预览 -->
           <el-dialog   v-model="addXingshizhengYulan">
               <img  style="width:100%;"  :src="XingshizhengYulanUrl" alt="Preview Image" />
           </el-dialog>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="发票">
            <div v-for='(item,index) in form1.images' :key=index >
              <div v-if='item.type === "fapiao"'>
                <el-image 
                 style="width: 100px; height: 100px" 
                 :src="item.fileName" 
              ></el-image><span @click='deleteImages(item.name)' class='deImage'>删除</span>
            </div>
            </div>

            <el-upload
             ref="fapiaoRef1"
             v-model:file-list="fapiaoList"
             class="upload-demo"
             action="https://ai-cxd.cn//admin/uploadFile"
             multiple
             :on-preview="fapiaoPreview"
             :on-remove="fapiaoRemove"
             :limit="3"
             list-type="picture-card"
             :on-success="fapiaoupDate1"
             :show-file-list='false'
           >
           <el-icon><Plus /></el-icon>             
           </el-upload>
           <!-- fapiao预览 -->
           <el-dialog   v-model="addfapiaoYulan">
               <img  style="width:100%;"  :src="fapiaoYulanUrl" alt="Preview Image" />
           </el-dialog>
          </el-form-item>
        </el-col>

                <el-col :span="8">
          <el-form-item label="合格证">
            <div v-for='(item,index) in form1.images' :key=index >
              <div v-if='item.type === "hegezheng"'>
                <el-image 
                 style="width: 100px; height: 100px" 
                 :src="item.fileName" 
              ></el-image><span @click='deleteImages(item.name)' class='deImage'>删除</span>
            </div>
            </div>


            <el-upload
             ref="hegezhengRef1"
             v-model:file-list="hegezhengList"
             class="upload-demo"
             action="https://ai-cxd.cn//admin/uploadFile"
             multiple
             :on-preview="hegezhengPreview"
             :on-remove="hegezhengRemove"
             :limit="3"
             list-type="picture-card"
             :on-success="hegezhengupDate1"
              :show-file-list='false'
           >
           <el-icon><Plus /></el-icon>             
           </el-upload>
           <!-- fapiao预览 -->
           <el-dialog   v-model="addhegezhengYulan">
               <img  style="width:100%;"  :src="hegezhengYulanUrl" alt="Preview Image" />
           </el-dialog>
          </el-form-item>
        </el-col>


        </el-row>
        </el-form>



         <template #footer>
           <div class="dialog-footer">
             <el-button @click="quxiaoEditCar()">取消</el-button>
             <el-button type="primary" @click="xiugaiCar">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>   

    <!-- 添加出车记录对话框 -->
    <el-dialog
         v-model="chucheVisible"
         title="添加出车记录"
         width="500"
         :before-close="chucheClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 添加记录的表单内容 -->
        <el-form v-loading="addChucheloading"  :model="chucheForm" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">
          <el-form-item label="订单号">
            <el-input v-model="chucheForm.dingdanhao" />
          </el-form-item>
          <el-form-item label="车牌号码">
            <el-input v-model="chucheForm.chepaihao" disabled  />
          </el-form-item>
          <el-form-item label="车架号">
            <el-input v-model="chucheForm.chejia" disabled />
          </el-form-item>
          <el-form-item inline-message='true' label="出车司机">
            <el-select v-model="chucheForm.siji" placeholder="选择司机">
              <el-option label="司机a" value="司机a" />
              <el-option label="司机b" value="司机b" />
            </el-select>
          </el-form-item>

          <el-form-item label="出车日期">
            <el-col :span="20">
              <el-date-picker
                v-model="chucheForm.chucheriqi"
                type="daterange"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                range-separator="到"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-col>
          </el-form-item> 

          <el-form-item label="预租金">
            <el-input v-model="chucheForm.yuzujin" />
          </el-form-item>

          <el-form-item label="押金">
            <el-input v-model="chucheForm.yanjin" />
          </el-form-item>

          <el-form-item label="目的地">
            <el-input v-model="chucheForm.mudidi" />
          </el-form-item>

          <el-form-item label="项目名称">
            <el-input v-model="chucheForm.xiangmu" />
          </el-form-item>


          <el-form-item label="是否收车">
            <el-select v-model="chucheForm.shouche" placeholder="选择记录类型">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select>
          </el-form-item>

         <el-form-item label="行驶里程">
            <el-input v-model="chucheForm.licheng" />
          </el-form-item>

          <el-form-item label="合同上传">
            <el-input v-model="chucheForm.hetong" />
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-model="chucheForm.beizhu" />
          </el-form-item>
        </el-form>

         <template #footer>
           <div class="dialog-footer">
             <el-button @click="chucheVisible = false">取消</el-button>
             <el-button type="primary" @click="addChucheInfo()">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>

     <!-- 添加加油记录对话框 -->
     <el-dialog
         v-model="jiayouVisible"
         title="添加加油记录"
         width="500"
         :before-close="jiayouClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 添加记录的表单内容 -->
        <el-form :model="jiayouForm" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">
          <el-form-item label="订单号">
            <el-input v-model="jiayouForm.dingdanhao" />
          </el-form-item>         
          <el-form-item label="车牌号码">
            <el-input v-model="jiayouForm.chepaihao" disabled />
          </el-form-item>
          <el-form-item label="车架号">
            <el-input v-model="jiayouForm.chejia" disabled />
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="jiayouForm.leixing" disabled />
          </el-form-item>
          <el-form-item label="加油日期">
            <el-col :span="11">
              <el-date-picker
                v-model="jiayouForm.jiayouriqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="金额">
            <el-input v-model="jiayouForm.jine" />
          </el-form-item>
          <el-form-item label="上传">
            <el-input v-model="jiayouForm.shangchuan" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="jiayouForm.beizhu" />
          </el-form-item>

        </el-form>

         <template #footer>
           <div class="dialog-footer">
             <el-button @click="jiayouVisible = false">取消</el-button>
             <el-button type="primary" @click="addJiayouInfo()">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>
     
    <!-- 添加维修记录 -->
    <el-dialog
         v-model="weixiuVisible"
         title="添加维修记录"
         width="500"
         :before-close="weixiuClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 添加记录的表单内容 -->
      <el-form :model="weixiuForm" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">
          <el-form-item label="订单号">
            <el-input v-model="weixiuForm.dingdanhao" />
          </el-form-item>         
          <el-form-item label="车牌号码">
            <el-input v-model="weixiuForm.chepaihao" disabled />
          </el-form-item>
          <el-form-item label="车架号">
            <el-input v-model="weixiuForm.chejia" disabled />
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="weixiuForm.leixing" disabled />
          </el-form-item>
          <el-form-item label="维修日期">
            <el-col :span="11">
              <el-date-picker
                v-model="weixiuForm.weixiuriqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="金额">
            <el-input v-model="weixiuForm.jine" />
          </el-form-item>
          <el-form-item label="上传">
            <el-input v-model="weixiuForm.shangchuan" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="weixiuForm.beizhu" />
          </el-form-item>

        </el-form>

         <template #footer>
           <div class="dialog-footer">
             <el-button @click="weixiuVisible = false">取消</el-button>
             <el-button type="primary" @click="addWeixiuInfo()">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>

    <!-- 添加违章记录 -->
    <el-dialog
         v-model="weizhangVisible"
         title="添加违章记录"
         width="500"
         :before-close="weizhangClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 添加记录的表单内容 -->
      <el-form :model="weizhangForm" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">   
          <el-form-item label="订单号">
            <el-input v-model="weizhangForm.dingdanhao" />
          </el-form-item>

          <el-form-item label="车牌号码">
            <el-input v-model="weizhangForm.chepaihao" disabled />
          </el-form-item>
          <el-form-item label="车架号">
            <el-input v-model="weizhangForm.chejia" disabled />
          </el-form-item>

          <el-form-item label="驾驶员">
            <el-input v-model="weizhangForm.jiashiyuan" />
          </el-form-item>

         <el-form-item label="违章日期">
            <el-col :span="11">
              <el-date-picker
                v-model="weizhangForm.weizhangriqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="违章事项">
            <el-input v-model="weizhangForm.weizhangshixiang" />
          </el-form-item>

          <el-form-item label="违章地点">
            <el-input v-model="weizhangForm.weizhangdidian" />
          </el-form-item>

          <el-form-item label="罚款">
            <el-input v-model="weizhangForm.fakuan" />
          </el-form-item>

          <el-form-item label="扣分">
            <el-input v-model="weizhangForm.koufen" />
          </el-form-item>
          <el-form-item label="处理人">
            <el-input v-model="weizhangForm.chuliren" />
          </el-form-item>

         <el-form-item label="处理日期">
            <el-col :span="11">
              <el-date-picker
                v-model="weizhangForm.chuliriqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="备注">
            <el-input v-model="weizhangForm.beizhu" />
          </el-form-item>


        </el-form>

         <template #footer>
           <div class="dialog-footer">
             <el-button @click="weizhangVisible = false">取消</el-button>
             <el-button type="primary" @click="addWeizhangInfo()">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>


    <!-- 添加其他记录 -->
    <el-dialog
         v-model="qitaVisible"
         title="添加其他记录"
         width="500"
         :before-close="qitaClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 添加记录的表单内容 -->
      <el-form :model="qitaForm" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">
          <el-form-item label="订单号">
            <el-input v-model="qitaForm.dingdanhao" />
          </el-form-item>         
          <el-form-item label="车牌号码">
            <el-input v-model="qitaForm.chepaihao" disabled />
          </el-form-item>
          <el-form-item label="车架号">
            <el-input v-model="qitaForm.chejia" disabled />
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="qitaForm.leixing" disabled />
          </el-form-item>
          <el-form-item label="日期">
            <el-col :span="11">
              <el-date-picker
                v-model="qitaForm.qitariqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="金额">
            <el-input v-model="qitaForm.jine" />
          </el-form-item>
          <el-form-item label="上传">
            <el-input v-model="qitaForm.shangchuan" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="qitaForm.beizhu" />
          </el-form-item>

        </el-form>

         <template #footer>
           <div class="dialog-footer">
             <el-button @click="qitaVisible = false">取消</el-button>
             <el-button type="primary" @click="addQitaInfo()">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>

    <!-- 添加年检记录 -->
    <el-dialog
         v-model="nianjianVisible"
         title="添加年检记录"
         width="500"
         :before-close="nianjianClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 添加记录的表单内容 -->
      <el-form :model="nianjianForm" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">     
          <el-form-item label="车牌号码">
            <el-input v-model="nianjianForm.chepaihao" disabled />
          </el-form-item>
          <el-form-item label="车架号">
            <el-input v-model="nianjianForm.chepaihao" disabled />
          </el-form-item>

         <el-form-item label="年检日期">
            <el-col :span="11">
              <el-date-picker
                v-model="nianjianForm.nianjianriqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="驾驶员">
            <el-input v-model="nianjianForm.jiashiyuan" />
          </el-form-item>
          <el-form-item label="事项">
            <el-input v-model="nianjianForm.shixiang" />
          </el-form-item>

          <el-form-item label="地点">
            <el-input v-model="nianjianForm.didian" />
          </el-form-item>

          <el-form-item label="费用">
            <el-input v-model="nianjianForm.feiyong" />
          </el-form-item>
          <el-form-item label="处理人">
            <el-input v-model="nianjianForm.chuliren" />
          </el-form-item>

         <el-form-item label="处理日期">
            <el-col :span="11">
              <el-date-picker
                v-model="nianjianForm.chuliriqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="备注">
            <el-input v-model="nianjianForm.beizhu" />
          </el-form-item>


        </el-form>

         <template #footer>
           <div class="dialog-footer">
             <el-button @click="quxiaoNianjian()">取消</el-button>
             <el-button type="primary" @click="addNianjainInfo()">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>


     <!-- 每辆车的记录子组件 -->
     <el-dialog
      v-model="ListVisible"
      :title="listName"
      width="1200"
      height='600'
      :before-close="ListClose"
    >
    <zujianChuche v-if="listName === '出车记录'" :message='carDate'></zujianChuche>
    <zujianJiayou v-if="listName === '加油记录'" :message='carDate'></zujianJiayou>
    <zujianWeixiu v-if="listName === '维修记录'" :message='carDate'></zujianWeixiu>
    <zujianWeizhang v-if="listName === '违章记录'" :message='carDate'></zujianWeizhang>
    <zujianQita v-if="listName === '其他记录'" :message='carDate'></zujianQita>
    <zujianNianjian v-if="listName === '年检记录'" :message='carDate'></zujianNianjian>
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button @click="chucheListVisible = false">取消</el-button>
          <el-button type="primary" @click="chucheListVisible = false">
            确认
          </el-button>
        </div>
      </template> -->
    </el-dialog>
</template>

<script setup>
import { ref,reactive, onMounted} from 'vue'
import {getCarList,addCar,deleteCar,putCar} from '../../api/car.js'
const isLoggedIn = localStorage.getItem('token');

import {addChuche} from '../../api/chuche.js'
import { addJiayou,getJiayouList,deleteJiayou,putJiayou} from '../../api/jiayou'
import {addWeixiu,getWeixiuList,deleteWeixiu,putWeixiu} from '../../api/weixiu.js'
import {addWeizhang,getWeizhang,deleteWeizhang,putWeizhang} from '../../api/weizhang'
import {addQita,getQita,deleteQita,putQita} from '../../api/qita'
import {addNianjian,getNianjian,deleteNianjian,putNianjian} from '../../api/nianjian'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// import { UploadProps } from 'element-plus/es/el-upload/src/upload.type'


//引入出车列表组件
import zujianChuche from '../../zujian/chucheList.vue'
//引入加油列表组件
import zujianJiayou from '../../zujian/jiayouList.vue'
//引入维修列表组件
import zujianWeixiu from '../../zujian/weixiuList.vue'
//引入违章列表组件
import zujianWeizhang from '../../zujian/weizhangList.vue'
//引入其他列表组件
import zujianQita from '../../zujian/qitaList.vue'
//引入年检列表组件
import zujianNianjian from '../../zujian/nianjianList.vue'

//记录列表
const ListVisible = ref(false)
//记录列表的名字
const listName = ref()
//传递的数据
const carDate = ref()
//弹出出车列表函数
const tanList = (row,leixing)=>{
  ListVisible.value = true
    listName.value = leixing
  // console.log(row)
  carDate.value = row
}
//
const ListClose = ()=>{
  ListVisible.value = false
}

const xingshizhengRef = ref()
const xingshizhengRef1 = ref()
// 上传图片 行驶证暂存
const xingshizhengList = ref([])
//移除行驶证上传的图片
const xingshizhengRemove = (uploadFile, uploadFiles) => {
  form.value.images = form.value.images.filter(obj => obj.name !== uploadFile.response)

  console.log(form.value.images,'删除照片')
}
//行驶证预览图片地址
const XingshizhengYulanUrl = ref()
//上传完成
const xingshizhengupDate = (response, file, fileList) => {
  //将上传图片返回的地址赋值给表单   
  const updateImage = {
    type:"xingshizheng",
    name:response,
    fileName:`https://ai-cxd.cn/admin/getFile/${response}`,
  }
  console.log(file)

  form.value.images.push(updateImage)
  console.log(form.value.images)
}
//编辑上传完成
const xingshizhengupDate1 = (response, file, fileList) => {
  //将上传图片返回的地址赋值给表单   
  console.log(response)
  const updateImage = {
    type:"xingshizheng",
    name:response,
    fileName:`https://ai-cxd.cn/admin/getFile/${response}`,
  }

  form1.value.images.push(updateImage)
  // XingshizhengYulanUrl.value = `https://ai-cxd.cn/admin/getFile/${response}`
}

//行驶证预览图片弹窗开关
const addXingshizhengYulan = ref(false)
//点击预览
const xingshizhengPreview = (file)=>{
  XingshizhengYulanUrl.value = file.url
  addXingshizhengYulan.value = true
}

const fapiaoRef = ref()
const fapiaoRef1 = ref()
// 上传图片 发票暂存
const fapiaoList = ref([])
//移除发票上传的图片
const fapiaoRemove = (uploadFile, uploadFiles) => {
  form.value.images = form.value.images.filter(obj => obj.name !== uploadFile.response)
}
//发票预览图片地址
const fapiaoYulanUrl = ref()
//上传发票完成
const fapiaoupDate = (response, file, fileList) => {
  //将上传图片返回的地址赋值给表单   
  const updateImage = {
    type:"fapiao",
    name:response,
    fileName:`https://ai-cxd.cn/admin/getFile/${response}`,
  }

  form.value.images.push(updateImage)
  console.log(form.value.images)
  // XingshizhengYulanUrl.value = `https://ai-cxd.cn/admin/getFile/${response}`
}
const fapiaoupDate1 = (response, file, fileList) => {
  //将上传图片返回的地址赋值给表单     
    const updateImage = {
    type:"fapiao",
    name:response,
    fileName:`https://ai-cxd.cn/admin/getFile/${response}`,
  }

  form1.value.images.push(updateImage)
  // form1.value.fapiao = response
  // XingshizhengYulanUrl.value = `https://ai-cxd.cn/admin/getFile/${response}`
}
//发票预览图片弹窗开关
const addfapiaoYulan = ref(false)
//点击预览发票
const fapiaoPreview = (file)=>{
  fapiaoYulanUrl.value = file.url
  addfapiaoYulan.value = true
}

const hegezhengRef = ref()
const hegezhengRef1 = ref()
// 上传图片 合格证暂存
const hegezhengList = ref([])
//移除合格证上传的图片
const hegezhengRemove = (uploadFile, uploadFiles) => {
  form.value.images = form.value.images.filter(obj => obj.name !== uploadFile.response)
}
//合格证预览图片地址
const hegezhengYulanUrl = ref()
//合格证完成
const hegezhengupDate = (response, file, fileList) => {
  //将上传图片返回的地址赋值给表单   
  const updateImage = {
    type:"hegezheng",
    name:response,
    fileName:`https://ai-cxd.cn/admin/getFile/${response}`,
  }

  form.value.images.push(updateImage)
  // hegezhengYulanUrl.value = `https://ai-cxd.cn/admin/getFile/${response}`
}
const hegezhengupDate1 = (response, file, fileList) => {
    //将上传图片返回的地址赋值给表单   
    const updateImage = {
    type:"hegezheng",
    name:response,
    fileName:`https://ai-cxd.cn/admin/getFile/${response}`,
  }

  form1.value.images.push(updateImage)
  // form1.value.hegezheng = response
  // hegezhengYulanUrl.value = `https://ai-cxd.cn/admin/getFile/${response}`
}
//合格证预览图片弹窗开关
const addhegezhengYulan = ref(false)
//点击预览合格证
const hegezhengPreview = (file)=>{
  hegezhengYulanUrl.value = file.url
  addhegezhengYulan.value = true
}


 

const Success = ()=>{
  ElMessage({
             message: '添加成功',
             grouping: true,
             type: 'success',
             offset:200
           })
}

const total = ref()
const count = ref(0)
const sizeChange = (num)=>{
  count.value = num - 1
  getCarInfo()
}

const handleClose = ()=>{
  console.log('0')
}


//添加记录对话框开关
const addCarVisible = ref(false)
//编辑记录对话框开关
const bianjiVisible = ref(false)



//出车记录加载
const addChucheloading = ref(false)
// 新增出车记录对话框
const chucheVisible = ref(false)
// 新增出车记录表单
const chucheForm = ref({
        xuhao: '',
        chepaihao: '',
        dingdanhao: '',
        siji: '',
        chucheriqi: '',
        yuzujin: '',
        yanjin: '',
        mudidi: '',
        shixiang: '',
        fanhuidate: '',
        shouche: '',
        licheng: '',
        hetong: '',
        beizhu: '',
})
// 弹出出车记录表单
const tanchuChuche = (row)=>{
  chucheVisible.value = true 
  // console.log(index)
  chucheForm.value.chejia = row.chejia 
  chucheForm.value.chepaihao = row.chepaihao
}
// 确认添加出车记录表单
const addChucheInfo = ()=>{
  addChucheloading.value = true
    console.log(chucheForm.value)
    const chucheriqi = chucheForm.value.chucheriqi[0]
    const fanhuidate = chucheForm.value.chucheriqi[1]
    chucheForm.value.chucheriqi = chucheriqi
    chucheForm.value.fanhuidate = fanhuidate
    console.log(chucheForm.value)
    //请求后端接口
    addChuche(chucheForm.value).then(res =>{
      if(res.status === 200){
        addChucheloading.value = false
           //清空添加记录的表单
        chucheForm.value = {
                xuhao: '',
                chepaihao: '',
                dingdanhao: '',
                siji: '',
                chucheriqi: '',
                yuzujin: '',
                yanjin: '',
                mudidi: '',
                shixiang: '',
                fanhuidate: '',
                shouche: '',
                licheng: '',
                hetong: '',
                beizhu: ''
        }

    chucheVisible.value = false
        Success()
           getCarInfo()
      }
    }).catch(err=>{
      ElMessage({
             message: '添加出车记录失败，请刷新页面重新添加',
             grouping: true,
             type: 'error',
             offset:200
           })
    })
 
}
// 右上角关闭对话框
const chucheClose = (done) => {
  chucheForm.value = {
          xuhao: '',
          chepaihao: '',
          dingdanhao: '',
          siji: '',
          chucheriqi: '',
          yuzujin: '',
          yanjin: '',
          mudidi: '',
          shixiang: '',
          fanhuidate: '',
          shouche: '',
          licheng: '',
          hetong: '',
          beizhu: ''
  }
   done()
}



// 新增加油记录对话框
const jiayouVisible = ref(false)
//加油记录表单
const jiayouForm = ref({
    xuhao: '',
    chepaihao: '',
    dingdanhao: '',
    leixing: '加油',
    jiayouriqi: '',
    jine: '',
    shangchuan: '',
    beizhu: '',
})
//弹出加油记录表单
const tanchuJiayou = (row)=>{
  jiayouVisible.value = true 
  jiayouForm.value.chepaihao = row.chepaihao
  jiayouForm.value.chejia = row.chejia
}
// 确认添加加油记录表单
const addJiayouInfo = ()=>{
    //请求后端接口
    addJiayou(jiayouForm.value).then(res =>{
      if(res.status === 200){
           Success()
           getCarInfo()
      }
    }).catch(err=>{
      ElMessage({
             message: '添加加油记录失败，请刷新页面重新添加',
             grouping: true,
             type: 'error',
             offset:200
           })
    })
    //清空添加记录的表单
    jiayouForm.value = {
        xuhao: '',
        chepaihao: '',
        dingdanhao: '',
        leixing: '加油',
        jiayouriqi: '',
        jine: '',
        shangchuan: '',
        beizhu: '',
    }
    jiayouVisible.value = false
}
// 右上角关闭对话框
const jiayouClose = (done) => {
  jiayouForm.value = {
        xuhao: '',
        chepaihao: '',
        dingdanhao: '',
        leixing: '加油',
        jiayouriqi: '',
        jine: '',
        shangchuan: '',
        beizhu: '',
    }
   done()
}




//添加维修记录对话框
const weixiuVisible = ref(false)
// 维修记录表单
const weixiuForm = ref({
  xuhao: '',
  chepaihao: '',
  dingdanhao: '',
  leixing: '维修',
  weixiuriqi: '',
  jine: '',
  shangchuan: '',
  beizhu: ''
})
// 弹出维修记录
const tanchuWeixiu = (row)=>{
  weixiuVisible.value = true 
  weixiuForm.value.chepaihao = row.chepaihao
  weixiuForm.value.chejia = row.chejia
}
// 确认添加维修记录表单
const addWeixiuInfo = ()=>{
    //请求后端接口
    addWeixiu(weixiuForm.value).then(res =>{
      if(res.status === 200){
           Success()
           getCarInfo()
               //清空添加记录的表单
           weixiuForm.value = {
             xuhao: '',
             chepaihao: '',
             dingdanhao: '',
             leixing: '维修',
             weixiuriqi: '',
             jine: '',
             shangchuan: '',
             beizhu: ''
           }
           weixiuVisible.value = false
      }
    }).catch(err=>{
      ElMessage({
             message: '添加维修记录失败，请刷新页面重新添加',
             grouping: true,
             type: 'error',
             offset:200
           })
    })

}
// 右上角关闭对话框
const weixiuClose = (done) => {
  weixiuForm.value = {
      xuhao: '',
      chepaihao: '',
      dingdanhao: '',
      leixing: '维修',
      weixiuriqi: '',
      jine: '',
      shangchuan: '',
      beizhu: ''
  }
   done()
}



//添加违章记录对话框
const weizhangVisible = ref(false)
//违章记录表单
const weizhangForm = ref({
    xuhao: '',
    chepaihao: '',
    weizhangriqi: '',
    jiashiyuan: '',
    dingdanhao: '',
    weizhangshixiang: '',
    weizhangdidian: '',
    fakuan: '',
    koufen: '',
    chuliren: '',
    chuliriqi: '',
    beizhu: '',
})
//弹出违章记录表单
const tanchuWeizhang = (row)=>{
  weizhangVisible.value = true 
  weizhangForm.value.chepaihao = row.chepaihao
  weizhangForm.value.chejia = row.chejia
}
// 确认添加违章记录表单
const addWeizhangInfo = ()=>{
    //请求后端接口
    addWeizhang(weizhangForm.value).then(res =>{
      if(res.status === 200){
           Success()
           getCarInfo()
               //清空添加记录的表单
           weizhangForm.value = {
             xuhao: '',
             chepaihao: '',
             weizhangriqi: '',
             jiashiyuan: '',
             dingdanhao: '',
             weizhangshixiang: '',
             weizhangdidian: '',
             fakuan: '',
             koufen: '',
             chuliren: '',
             chuliriqi: '',
             beizhu: '',
           }
           weizhangVisible.value = false
      }
    }).catch(err=>{

    })

}
// 右上角关闭对话框
const weizhangClose = (done) => {
  weizhangForm.value = {
      xuhao: '',
      chepaihao: '',
      weizhangriqi: '',
      jiashiyuan: '',
      dingdanhao: '',
      weizhangshixiang: '',
      weizhangdidian: '',
      fakuan: '',
      koufen: '',
      chuliren: '',
      chuliriqi: '',
      beizhu: '',
    }
   done()
}


//添加其他记录对话框
const qitaVisible = ref(false)
// 其他记录表单
const qitaForm = ref({
        xuhao: '',
        chepaihao: '',
        dingdanhao: '',
        leixing: '其他',
        qitariqi: '',
        jine: '',
        shangchuan: '',
        beizhu: '',
})
// 弹出其他记录表单
const tanchuQita = (row)=>{
  qitaVisible.value = true 
  qitaForm.value.chepaihao = row.chepaihao
  qitaForm.value.chejia = row.chejia
}
// 确认添加其他记录表单
const addQitaInfo = ()=>{
    //请求后端接口
    addQita(qitaForm.value).then(res =>{
      if(res.status === 200){
           Success()
           getCarInfo()
      }
    })
    //清空添加记录的表单
    qitaForm.value = {
        xuhao: '',
        chepaihao: '',
        dingdanhao: '',
        leixing: '其他',
        qitariqi: '',
        jine: '',
        shangchuan: '',
        beizhu: '',
    }
    qitaVisible.value = false
}
// 右上角关闭对话框
const qitaClose = (done) => {
  qitaForm.value = {
        xuhao: '',
        chepaihao: '',
        dingdanhao: '',
        leixing: '其他',
        qitariqi: '',
        jine: '',
        shangchuan: '',
        beizhu: '',
    }
   done()
}


//添加年检记录对话框
const nianjianVisible = ref(false)
// 年检记录表单
const nianjianForm = ref({
    xuhao: '',
    chepaihao: '',
    nianjianriqi: '',
    jiashiyuan: '',
    shixiang: '',
    didian: '',
    feiyong: '',
    chuliren: '',
    chuliriqi: '',
    beizhu: '',
})
// 弹出年检记录表单
const tanchuNianjian = (row)=>{
  nianjianVisible.value = true 
  nianjianForm.value.chepaihao = row.chepaihao
  nianjianForm.value.chejia = row.chejia
}
// 确认添加年检记录表单
const addNianjainInfo = ()=>{
    //请求后端接口
    addNianjian(nianjianForm.value).then(res =>{
      if(res.status === 200){
           Success()
           getCarInfo()
      }
    })
    //清空添加记录的表单
    nianjianForm.value = {
       xuhao: '',
       chepaihao: '',
       nianjianriqi: '',
       jiashiyuan: '',
       shixiang: '',
       didian: '',
       feiyong: '',
       chuliren: '',
       chuliriqi: '',
       beizhu: '',
    }
    nianjianVisible.value = false
}
// 右上角关闭对话框
const nianjianClose = (done) => {
  nianjianForm.value = {
       xuhao: '',
       chepaihao: '',
       nianjianriqi: '',
       jiashiyuan: '',
       shixiang: '',
       didian: '',
       feiyong: '',
       chuliren: '',
       chuliriqi: '',
       beizhu: '',
    }
   done()
}
// 取消年检记录
const quxiaoNianjian = ()=>{
    nianjianVisible.value = false
    nianjianForm.value = {
       xuhao: '',
       chepaihao: '',
       nianjianriqi: '',
       jiashiyuan: '',
       shixiang: '',
       didian: '',
       feiyong: '',
       chuliren: '',
       chuliriqi: '',
       beizhu: '',
    }
}


//获取form的DOM对象
const formRef = ref();

const value = ref('')


//表格loading加载
const tableloading = ref(false)
//车辆列表信息
const tableData = ref()
// 添加车辆记录的表单内容
const form = ref( {
        xuhao: '',              
        type: '',
        chepaihao: '',      
        name: '',
        date: '',
        xinghao: '',
        chejia: '',      
        fadongji: '',  
        licheng: '',
        position: '',
        nianjian: '',
        zhuangtai: '',
        waidiao:'',
        images: []
    })

// 编辑记录的表单内容
const form1 = ref()

// 编辑车辆记录按钮
const bianjiClick = (row) => {
  const {...rowData} = row
  form1.value = rowData
  bianjiVisible.value = true
  console.log(row)
}
//关闭车辆编辑弹窗
const editClose = ()=>{
  bianjiVisible.value = false
    xingshizhengRef1.value.clearFiles();
    fapiaoRef1.value.clearFiles();
    hegezhengRef1.value.clearFiles();
    getCarInfo()

}
//加载
const editCarloading = ref(false)
//修改车辆信息 确认
const xiugaiCar = ()=>{
  editCarloading.value = true
  console.log(form1.value)
  putCar(form1.value).then(res =>{
    if(res.status === 200){
      ElMessage({
           showClose: true,
           message: '修改成功',
           type: 'success',
           offset:200
         })
    editCarloading.value = false
    bianjiVisible.value = false
    console.log(res,'修改返回值')
    getCarInfo()

    xingshizhengRef1.value.clearFiles();
    fapiaoRef1.value.clearFiles();
    hegezhengRef1.value.clearFiles();
    }
  }).catch(err=>{
    ElMessage({
           showClose: true,
           message: '修改失败',
           type: 'error',
           offset:200
         })
  })

}
//取消编辑车辆信息
const quxiaoEditCar = ()=>{
  bianjiVisible.value = false
      xingshizhengRef1.value.clearFiles();
    fapiaoRef1.value.clearFiles();
    hegezhengRef1.value.clearFiles();
    getCarInfo()
}
// 删除图片附件
const deleteImages = (resp)=>{
  console.log(resp)
  console.log(form1.value.images)
  form1.value.images = form1.value.images.filter(obj => obj.name !== resp)
  console.log(form1.value.images)
}





const loading = ref(false)
//新增车辆信息的表单验证规则
const addCarrules = reactive({
  chejia: [
    { required: true, message: '请输入8位车架号', trigger: 'blur' },
    { min: 8, max: 8, message: '需要输入8位的车架号', trigger: 'blur' },
  ],
})
//确认新增车辆
const qurenAdd = async (formEl)=>{
  if(!formEl)return

 await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
        addCar(form.value).then(res =>{
            if(res.status === 200){
                  loading.value = false
                   Success()
                   xingshizhengRef.value.clearFiles();
                   fapiaoRef.value.clearFiles();
                   hegezhengRef.value.clearFiles();
                   addCarVisible.value = false 
                   getCarInfo()
                   // 清空表单
                   form.value =  {
                       xuhao: '',              
                       type: '',
                       chepaihao: '',      
                       name: '',
                       date: '',
                       xinghao: '',
                       chejia: '',      
                       fadongji: '',  
                       licheng: '',
                       position: '',
                       nianjian: '',
                       zhuangtai: '',
                       waidiao:''
                   }
                   //行驶证图片清空
        
              }
              formEl.resetFields()
          }).catch(err =>{
            console.log(err)
            ElMessage({
                   showClose: true,
                   message: '添加车辆失败，请刷新页面重新添加',
                   type: 'error',
                   offset:200
                 })
          })
    } else {
      console.log('error submit!', fields)
    }
  })

}

// 关闭车辆新增弹窗
const carlistClose = (formEl)=>{
  formRef.value.resetFields();
  console.log('guanbi')
  form.value =  {
        xuhao: '',              
        type: '',
        chepaihao: '',      
        name: '',
        date: '',
        xinghao: '',
        chejia: '',      
        fadongji: '',  
        licheng: '',
        position: '',
        nianjian: '',
        zhuangtai: '',
        waidiao:''
    }
    addCarVisible.value = false 
    xingshizhengRef.value.clearFiles();
    fapiaoRef.value.clearFiles();
    hegezhengRef.value.clearFiles();
    // xingshizhengList = ref([])
}
//取消车辆新增弹窗
const quxiaoAddcar = (formEl)=>{
  formEl.resetFields()
  form.value =  {
        xuhao: '',              
        type: '',
        chepaihao: '',      
        name: '',
        date: '',
        xinghao: '',
        chejia: '',      
        fadongji: '',  
        licheng: '',
        position: '',
        nianjian: '',
        zhuangtai: '',
        waidiao:''
    }
    addCarVisible.value = false 
    xingshizhengRef.value.clearFiles();
    fapiaoRef.value.clearFiles();
    hegezhengRef.value.clearFiles();
}

//查询车辆列表
const getCarInfo = ()=>{
   tableloading.value = true
   console.log('查询了列表')
    getCarList(count.value,{}).then(res =>{
      tableloading.value = false
      tableData.value = res.data.content
        console.log(tableData.value,'请求回来的')
      const imagesBack = res.data.content

      total.value = Number(res.data.totalElements)
      // total.value = res.data.totalElements || 0
      console.log('total = ', total.value)
      console.log('total type: ', typeof total.value)

      
      console.log(res)
      console.log(tableData.value, '修改之后的')
    }).catch(err =>{
      if(err){
        ElMessage({
             message: '获取数据超时，请刷新页面',
             grouping: true,
             type: 'warning',
             offset:200
           })
           console.log(err)
      }
    })
}



//删除车辆按钮
const deleteInfo = (row)=>{
  // console.log(index)
  tableloading.value = true
  const Dxuhao = row.xuhao
  deleteCar(Dxuhao).then(res =>{
   tableloading.value = false
     ElMessage({
             message: '删除成功',
             grouping: true,
             type: 'success',
             offset:200
           })
    console.log(res)
    getCarInfo()
  }).catch(err =>{
       ElMessage({
             message: '删除失败',
             grouping: true,
             type: 'warning',
             offset:200
           })
  })
}


//按照时间查询
const formInline = ref({
  // user: '',
  // DataType: '',
  date: '',
})

//查询按钮
const chaxun = ()=>{
  console.log('按照时间查询')
  const data = {
    "startDate":"",
    "endDate":""
  }
  // getCarList()

  data.startDate = formInline.value.date[0]
  data.endDate = formInline.value.date[1]
  // const startDate = formInline.value.date[0]
  // const endDate = formInline.value.date[1]
  // console.log(data)
  // console.log()
  console.log(formInline.value.date)
  getCarList(0,data).then(res =>{
      tableloading.value = false
      tableData.value = res.data.content
        console.log(tableData.value,'请求回来的')
      const imagesBack = res.data.content

      total.value = Number(res.data.totalElements)
      // total.value = res.data.totalElements || 0
      console.log('total = ', total.value)
      console.log('total type: ', typeof total.value)

      
      console.log(res)
      console.log(tableData.value, '修改之后的')
    }).catch(err =>{
      if(err){
        ElMessage({
             message: '获取数据超时，请刷新页面',
             grouping: true,
             type: 'warning',
             offset:200
           })
           console.log(err)
      }
    })
}

onMounted(()=>{
  getCarInfo()
})

</script>

<style lang="scss" scoped>
.all{
    background-color: #d6d6d6;
    height: 100%;
    overflow: hidden;
    padding-left: 10px;
    .bread{
        height: 30px;
        background-color: #fff;
        margin-bottom: 10px;
    }
    .nav{
        height: 40px;
        background-color: #fff;
        margin-bottom: 10px;
        padding: 10px 0px 0px 0px;
        display: flex;
        justify-content: left;
        align-items: bottom;
        div{
            span{
                margin:  10px;
                line-height: 40px;
            }
        }
    }
    .content{
        background: #fff;
        height: 100%;
        padding: 5px;
        overflow: hidden;
        span{
          padding:0 2px;
        }
        .tianjia{
          font-size: 12px;
           color:red;
           margin-right: 20px;
           &:hover{
            color:rgb(248, 146, 146);
            cursor: pointer;
           }
        }
        .page{
          margin: 10px auto;
        }
    }
}

.deImage{
  color:rgb(248, 146, 146);

  font-size:12px;
  &:hover{
           color:red;
            cursor: pointer;
          }

}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
  text-align: center;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

// pictuercard 大小

::v-deep .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
 
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
}

</style>